<template>
<uni-shadow-root class="partials-section_list-type_one-index"><template name="typeOne">
<block>
    <scroll-view scroll-y class="section_list" v-if="sectionList.length!=0">
        <view v-for="(sectionItem,index) in (sectionList)" :key="sectionItem.index" class="section_item" v-if="limitState?limitState>index:'true'" :data-link="'section_detail.html?needLogin=1&sectionId='+(sectionItem.id)" @click="tolinkUrl">
            <view class="section_item_left">
                <image class="section_item_banner" mode="aspectFit" :src="sectionItem.banner"></image>
                <text class="section_item_tag" v-if="sectionItem.contentType==1">视频</text>
                <text class="section_item_tag" v-else-if="sectionItem.contentType==2">直播</text>
                <text class="section_item_tag" v-else-if="sectionItem.contentType==3">音频</text>
                <text class="section_item_tag" v-else>图文</text>
            </view>
            <view class="section_item_right">
                <text class="section_item_name">{{sectionItem.title}}</text>
                <text class="section_item_description">{{sectionItem.description}}</text>
                <view class="section_item_bottom">
                    <view class="section_item_time">
                        <image class="section_item_time_icon" src="https://image1.sansancloud.com/xianhua/2020_3/5/15/11/46_82.jpg?x-oss-process=style/preview_120"></image>
                        <text class="section_item_time_value">{{sectionItem.startTime}}</text>
                    </view>
                    <text class="section_item_price" v-if="sectionItem.freeSection==1">免费</text>
                    <text class="section_item_price" v-else>￥{{sectionItem.sectionPrice}}</text>
                </view>
            </view>
        </view>
    </scroll-view>
    <view class="noproduct" v-else :style="'margin-top:'+(limitState!=0?"0rpx":"200rpx")">
      <image mode="widthFix" src="https://image1.sansancloud.com/xianhua/2019_12/16/15/54/55_950.jpg?x-oss-process=style/preview_120"></image>
      <text>没有相关课程</text>
    </view>
</block>
</template></uni-shadow-root>
</template>

<script>

global['__wxRoute'] = 'partials/section_list/type_one/index'

Component({})

export default global['__wxComponents']['partials/section_list/type_one/index']
</script>
<style platform="mp-weixin">
.section_list{
    display: flex;
    flex-direction: column;
    padding: 0 20rpx;
    width: 100%;
    box-sizing: border-box;
}
.section_item{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 20rpx 0;
    border-bottom:  1rpx solid #eee;
}
.section_item_left{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 45%;
    margin-right: 20rpx;
}
.section_item_banner{
    width: 100%;
    height: 210rpx;
}
.section_item_tag{
    position: absolute;
    bottom: 10rpx;
    right: 10rpx;
    background-color: rgba(0,0,0,0.6);
    padding: 5rpx 10rpx;
    color: #fff;
    font-size: 20rpx;
    border-radius: 10rpx;
}
.section_item_right{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 55%;
    height: 210rpx;
}
.section_item_name{
    font-size: 28rpx;
    font-weight: bold;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    width: 100%;
}
.section_item_description{
    font-size: 24rpx;
    color: #666;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    width: 100%;
}
.section_item_bottom{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}
.section_item_time{
    display: flex;
    flex-direction: row;
    align-items: center;
}
.section_item_time_icon{
    width: 30rpx;
    height: 30rpx;
    margin-right: 6rpx;
}
.section_item_time_value{
    font-size: 24rpx;
    color: #999;
}
.section_item_price{
    font-size: 26rpx;
    color: red;
}
/*没有相关商品  */
.noproduct{
  width: 100%;
  padding: 30rpx;
  box-sizing: border-box;
  text-align: center;
  display: flex;
  flex-direction: column;
  margin-top: 200rpx;
}
.noproduct image{
  width: 150rpx;
  height: 150rpx;
  margin: 0 auto;
}
.noproduct text{
  font-size: 30rpx;
}
</style>